<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item1{
    margin-bottom: 10px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>

<template>
  <div>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Row class="bench_search">
<!--      <Col span="6" offset="1">-->
<!--        <span>标题：</span>-->
<!--        <Input style="width: 70%;" v-model="searchInfo.title" />-->
<!--      </Col>-->
      <Col span="5">
        <span>文件名称：</span>
        <Input v-model="searchInfo.title" style="width: 75%"></Input>
      </Col>
      <Button class="new-btn-sty" @click="searchData" style="margin-right:10px"><Icon type="ios-search" /> 搜索</Button>
      <Button class="new-btn-sty" @click="editNotice({})" v-if="company_code === 'LM'"><Icon type="md-add" /> 创建</Button>
      <Modal v-model="modalEdit" title="上传材料" width="700" cancel-text="关闭"
        @on-ok="ok111(paramData2)" @on-cancel="modalEdit=false" ok-text="确定">
        <Form :model="paramData2" >
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">材料名称:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.title"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">上传表单文档:</Col>
            <Col span="12" offset="1">
              <Upload action="//txy.juyouhx.com/Api/Api/ObjectToOss/" :format="['pdf','jpg','jpeg','png','doc','xlsx']"
                      :max-size="10240" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
                      style="display: inline-block" :on-success="uploadFile" :show-upload-list="false">
                <Button icon="ios-cloud-upload-outline">上传</Button>
              </Upload>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="5" style="text-align: right" v-if="paramData2.file_url">上传确认:
<!--              <span>{{paramData2.title}}</span>-->
<!--              <Button icon="ios-cloud-upload-outline" v-if="paramData2.file_url">查看</Button>-->
            </Col>
            <Col span="12" offset="1">
              <div v-if="paramData2.file_url">{{ paramData2.file_url }}</div>
            </Col>
          </Row>
        </Form>
      </Modal>
    </Row>
    <Table border :columns="columns1" :data="datalist"></Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="matterPage" class="page_style" show-sizer @on-page-size-change="SXsize"/>
<!--    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="init(param)" class="page_style"/>-->
  </Card>
    <Modal v-model="paramData2.modal1" :title="paramData2.title" width="900">
      <Row>
        <Col span="24" class="ivu-form-item-content" style="text-align: center">
          <embed width="800" v-if="paramData2.modal1" height="600" :src="paramData2.file_url"/>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="error" size="large" @click="paramData2.modal1=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { saveconfirm, deleteconfirm, findTrainingList } from '@/api/eventlist'
// import { releaseNoticeList } from '@/api/mainv3'

export default {
  name: 'message',
  data () {
    return {
      loadData: true,
      showNotice: false,
      modalEdit: false,
      company_code: '',
      params: { pageNo: '', pageSize: '' },
      searchInfo: { title: '', state: '' },
      paramData: {},
      // 修改或添加新通知公告时使用
      paramData2: { modal1: false, file_url: '', title: '' },
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 10,
      columns1: [
        { title: '序号', type: 'index', width: 100, align: 'center' },
        { title: '材料名称', key: 'title', width: 300, align: 'center' },
        { title: '创建时间', key: 'create_time', width: 300, align: 'center' },
        // {
        //   title: '状态',
        //   key: 'state',
        //   width: 150,
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('span', params.row.state === '1' ? '已确认' : '未确认')
        //   }
        // },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          Width: 150,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                on: {
                  click: () => {
                    this.viewProcess(params.row)
                  }
                }
              }, '查看文档'),
              // h('Button', {
              //   props: { type: 'error', size: 'small' },
              //   style: { marginRight: '5px' },
              //   on: {
              //     click: () => {
              //       this.remove(params.row)
              //     }
              //   }
              // }, '删除'),
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#FFEA00', borderColor: '#FFEA00' },
                on: {
                  click: () => {
                    this.downLoad(params.row)
                  }
                }
              }, '下载')
            )
            if (this.company_code === 'LM'){
              temp.push(
                h('Button', {
                  props: { type: 'error', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                }, '删除'),
              )
            }
            return h('div', temp)
          }
        }
      ],
      datalist: []
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    downLoad (item) {
      if (item.file_url) {
        window.open(item.file_url)
      } else {
        this.$Notice.error({ title: '无文件', desc: '' })
      }
    },
    uploadFile (res) {
      console.log(res.url)
      this.paramData2.file_url = res.url
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式错误',
        desc: '文件 ' + file.name + ' 不正确，请选择pdf、png、jpg、doc、xlsx格式文件'
      })
    },
    // 文件大小
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '文件大小超出限制',
        desc: '文件  ' + file.name + ' 不能超过10M。'
      })
    },
    // 查询订单列表接口
    init (param) {
      if (this.companyCode) {
        param.pageNo = this.currentPageNo
        param.pageSize = this.currentPageSize
        console.log(param
        )
        findTrainingList(param).then(res => {
          if (res.data.errcode === 0) {
            this.datalist = res.data.data.results
            this.totalnum = res.data.data.totalRecord
            this.loadData = false
          } else {
            this.loadData = true
            this.$Notice.error({ title: '获取材料信息列表失败', desc: res.data.errmsg })
          }
        })
      }
    },
    SXsize (pageSize) {
      this.currentPageSize = pageSize
      this.init(this.params)
    },
    matterPage (pageNo) {
      this.currentPageNo = pageNo
      this.init(this.params)
    },
    ok111 (param) {
      saveconfirm(param).then(res => {
        if (res.data.errcode === 0) {
          this.paramData2.file_url = '111'
          this.init(this.params)
          this.$Notice.success({ title: '成功', desc: '' })
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    showInfo (item) {
      this.showNotice = true
      this.paramData.title = item.title
      this.paramData.content = item.contents
      this.paramData.sort = item.sort
      this.paramData.release_time = item.release_time
    },
    viewProcess (item) {
      if (item.file_url) {
        this.paramData2.title = item.title
        this.paramData2.modal1 = true
        this.paramData2.file_url = item.file_url
      } else {
        this.$Notice.error({ title: '无文件', desc: '当前事项无文档' })
      }
    },
    editNotice (item) {
      this.modalEdit = true
      this.paramData2.id = item.id || ''
      this.paramData2.title = item.title || ''
      this.paramData2.file_url = ''
      console.log(this.paramData2.file_url, '@@@@')
    },
    remove (item) {
      if (confirm('确定删除该条数据吗')) {
        deleteconfirm({ id: item.id }).then(res => {
          console.log(res.data.errcode)
          if (res.data.errcode === 0) {
            this.init(this.params)
            return
          }
          this.$Notice.error({ title: '删除失败', desc: res.errmsg })
        })
      }
    },
    searchData () {
      let params = {
        state: this.searchInfo.state,
        title: this.searchInfo.title
      }
      this.currentPageNo = 1
      this.init(params)
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      let params = {
        state: this.searchInfo.state,
        title: this.searchInfo.title
      }
      this.init(params)
    },
    // 发布or撤销,state==='1'时表示发布通知，state==='0'时表示撤销通知
    setNoticeState (item, state) {
      let msg = state === '1' ? '确定已检查吗！' : '确认未检查吗！'
      var param = { id: item.id, state: state }
      if (confirm(msg)) {
        setSituationState(param).then(res => {
          if (res.data.errcode === 0) {
            this.init(this.params)
            return
          }
          this.$Notice.error({ title: '失败', desc: res.errmsg })
        })
      }
    }
  },
  mounted () {
    this.init(this.params)
    this.company_code = this.$store.state.user.severUserInfo.company_code
  }
}
</script>
